<template>
  <!--  1.能力 看设计图把router.js建立所有的路由架构 
      2.能力 看设计图中有哪些组件是可以复用 
      例子 ： 弹窗（封装的通用组件）
三个部分组成 
1.title (弹窗标题) 
2.content (弹窗的内容) 
3.button (按钮) 
4.在通用的弹窗组件中 每个按钮做的事情都是不一样的，
  按钮的点击事情，不应该放在这里 ，事件处理函数放在对应的组件中
  写事件派发
-->
  <div class="modal">
    <!-- 遮罩 -->
    <div class="mask"></div>
    <!-- 具体内容区域 -->
    <div class="content">
      <!-- title是标题 -->
      <h3>{{ title }}</h3>
      <!-- slot 是弹窗内容 -->
      <div>
        <slot name="body"></slot>
      </div>
      <!-- 弹窗按钮 -->
      <div v-if="btnType == 1">
        <button @click="submit">确定</button>
        <button @click="cancel">取消</button>
      </div>
      <div v-if="btnType == 2">
        <button @click="goMine">前往个人中心</button>
        <button @click="goHome">前往首页</button>
      </div>
    </div>
  </div>
</template>

<script setup>
// 需要接受两个参数 title btnType
// 如何在Vue3.0中设置父子组件通讯
import { defineProps, defineEmits } from "vue";
let props = defineProps({
  title: {
    type: String,
    required: true,
  },
  btnType: {
    type: Number,
    required: true,
  },
});
console.log(props);
const emits = defineEmits(["submit", "cancel", "goHome", "goMine"]);
const goMine = () => {
  emits("goMine");
};
const goHome = () => {
  emits("goHome");
};
</script>

<style lang="scss" scoped>
.modal {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  // 确保在最上方
  z-index: 999;
  .mask {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.2);
  }
  .content {
    width: 3rem;
    height: 2rem;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: skyblue;
  }
}
</style>
